<template>
  <div>
    <h2>Products</h2>
    <p><input type="text" v-model="foo"> <span>{{foo}}</span></p>
    <ul>
      <li v-for="item in products" :key="item.id">
        <span>{{ item.title }}</span>
        -
        <span>{{ item.price }}</span>
        <br>
        <button :disabled="item.inventory===0" @click="addProductToCart(item)">Add to cart</button>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {

  /**
 * 组件中获取数据流程，初始化 products 数据 all 为空
 * 提交一个 dispatch 异步获取 api 中数据
 * mutations 修改数据
 * mapState 引入数据
 * for 循环 使用数据
 *
 * 验证了官图 ，actions 和 Backend API
 * actions  ->commit-> mutations
 * mutations ->mutate-> state  同时 mutations 修改 devTool 工具 改变 state
 * state ->render-> Vue Com
*/

  computed: {
    ...mapState('products', {
      products: 'all'
    }),
    // 双向绑定
    foo: {
      get () {
        return this.$store.state.foo
      },
      set (value) {
        this.$store.commit('setFoo', value)
      }
    }
  },
  methods: {
    ...mapActions('cart', {
      addProductToCart: 'addProductToCart'
    })
  },
  created () {
    // 先提交模块 action
    this.$store.dispatch('products/getAllProducts')
  }
}
</script>
<style scoped>

</style>
